<html>

<head>
    <meta charset="UTF-8">
    <title>
        前端技术基础示例与实践
    </title>
    <!--保证在chrome中媒体查询正常-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
    <h1>前端技术基础示例与实践</h1>
    <aside>
        <h2>目录</h2>
        <ol>
            <li><a href="#prepare">课程的基本准备</a></li>
            <li><a href="#faq">常见问题</a></li>
            <li><a href="firstpage.html">我的第一个网页</a></li>
            <li><a href="boxmodel.html">盒子模型</a></li>
            <li><a href="display.html">显示模式：display基础</a></li>
            <li><a href="position.html">定位和尺寸</a></li>
            <li><a href="layout.html">网页布局</a></li>
            <li><a href="layoutexample/chineselayout.html">中国传统版式实现</a></li>
            <li><a href="https://docs.qq.com/sheet/DYVN0Skx0bHh6cmFu">网页前端技术基础仓库信息采集</a></li>
        </ol>
    </aside>
    <h2 id="prepare">
        课程的基本准备
    </h2>
    <ol>
        <li>注册gitee账号</li>
        <li>创建你的第一个gitee仓库</li>
        <li>使用gitee的web编辑器，创建index.html文档，并提交到仓库</li>
        <li>设置gitee pages</li>
        <li>预览您的第一个网站！</li>
    </ol>
    <h3>git常用命令</h3>

    <h4>设置命令</h4>
    <ol>
        <li>git config --global user.name yourname</li>
        <li>git config --global user.email your@email</li>
    </ol>
    <h4>仓库操作命令</h4>
    <h5>git常用命令图解</h5>
    <img style="width: 100%;" src="image/63651-20170905212837976-775285128.png">
    <p>图片来源：<a href="https://www.cnblogs.com/best/p/7474442.html">一小时学会git</a></p>
    <ol>
        <li>
            <p>git clone 就是将远程仓库克隆到本地，创建以仓库名同名的目录作为工作区，
                下面创建.git目录存远程仓库和暂存区，仓库最新版本内容放在该目录下（仓库里的head版本）。
                本地无需git init，直接git clone url。
            </p>
        </li>
        <li>
            <p>git fetch 获取最新远程仓库到本地，不会自动merge，不会影响本地目录下的工作区文件。</p>
        </li>
        <li>
            <p>git pull：相当于是从远程获取最新仓库版本到本地，并将最新更新merge到本地，
                也就是将远程更新和本地更新合并。
        </li>
    </ol>
    <p>总结：</p>
    <p>相比起来，git fetch更安全也更符合实际要求，因为可以在merge前，
        可以查看更新情况，根据实际情况再决定是否合并。</p>
    <h5>本课程需要掌握的git命令</h5>
    <p>常用命令如上，但是你不需要现在就掌握上面的全部命令，
        只需要掌握下面列表的4条命令即可：
    </p>
    <ol>
        <li>克隆服务器的仓库到本地： git clone 仓库的网址</li>
        <li>在本地编辑完毕，暂存到暂存区：git add .</li>
        <li>把本仓库暂存区的东西提交到仓库：git commit -m 本次提交的提示信息</li>
        <li>推动本地仓库到远程仓库：git push</li>
    </ol>
    <h5>玩游戏学git</h5>
    <p>玩游戏也可以学git哦，但是这个游戏远远超出了本课程需要掌握的git命令的范围，如果你真的想想深入git，可以看这里：<br><a href="https://learngitbranching.js.org/?locale=zh_CN">Learning Branching</a></p>
    <h2 id="faq">常见问题</h2>
    <ul>
        <li>我如果不用 git config 命令配置git行么？ <br> 不行，如果不配置，您无法提交更新的内容到本地仓库。</li>
        <li>我本地提交，每次都提示没有什么提交的东西，咋回事？<br>您保存文件了么？（文件、保存命令或自动保存）您保存文件暂存到暂存区了么？（git add）</li>
        <li>git commit命令，我不用-m开关行么？ <br> 可以，但是命令会弹出字符界面的文本编辑窗口，让你输入本次提交的提示信息，不方便，所以还是要使用-m好些。</li>
        <li>我push成功了，但是gitee上查看文件，没有变化，咋回事？<br> 你的本地编辑没有正确提交到本地的仓库（例如没有保存修改的文件，或者没有git add，或者提交本地仓库失败）。</li>
        <li>我都push很多次了，查看gitee的文件，的确变化了，但是我的pages总是没有变化，咋回事？<br> 你没有在gitee上进入服务,pages功能，更新仓库的pages吧？</li>
        <li>每次提交都必须输入提交的提示信息么？ <br> 是的，每次都必须，查看你的gitee仓库，你的每次提交都被记录，
            仓库能够完整跟踪你的工作过程，就像时光机一样，如果你真的需要，你可以回到之前的任何一次提交。<br>
            你可以看看我的仓库的提交历史记录：<a
                href="https://gitee.com/edl7878/webfrontbasic/graph/master">访问edl7878的webfront仓库提交历史记录图</a></li>
        <li>git每次都要手动提交，好麻烦；我用网盘，它自动将服务器和我本地的文件同步，这不方便多了，不香么？<br>
            是方便，但是不香。网盘同步，你如果本地做了错误的操作，该错误将立即扩散（同步）到服务器。但是如果用git，在本地不管如何修改，只要不提交并push，服务器不会受到影响。
            我们在开发过程中，服务器还要提供服务，在该情况下，服务器必须始终在正确状态，而本地我们的开发，可能处在一个从前一个版本到下一个版本的过渡状态，在这种
            时候，git比较香。</li>
        <li>我经常画图和做视频，单个文件大小几百兆到几个G，能用git来管理我对这些大文件的修改记录么？<br>
            理论上可以，但是不建议这样用。比如一个2G的文件，你每修改并提交一次，则新的版本就要另占用2个G的空间，虽然你记录了历史，但是你浪费了大量的空间。如果你的媒体文件不用修改，则放到仓库里
            是没问题的，只要文件内容不变，git保证它在仓库里只存一份，不会因为多次提交而浪费空间。</li>
        <li>我更新了仓库，也更新了git pages, 刷新页面，没有变化，是为什么？<br>
            以chrome为例，它为了迅速显示，会使用缓存，例如css文件，下载一次，持续使用，因此虽然你更新了css，但是它不会下载新的使用。
            此时，你可以使用快捷键<em style="color: brown;">Ctrl+Shift+R</em>, 不使用缓存，强制更新页面试试。
            你也可以暂时使用另一个浏览器，测试页面是否正常。</li>
    </ul>
    <footer>
        <p>本仓库网址：<a href="https://gitee.com/edl7878/webfrontbasic">https://gitee.com/edl7878/webfrontbasic</a></p>
    </footer>
</body>

</html>